<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      /**
       * 样式和阴影
       * fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式
       * strokeStyle: 设置或返回用于笔触的颜色、渐变或模式
       * shadowBlur: 设置或返回用于阴影的模糊级别
       * shadowColor: 设置或返回阴影的颜色
       * shadowOffsetX: 设置或返回阴影的横向偏移
       * shadowOffsetY: 设置或返回阴影的纵向偏移
       * 创建线性渐变的样式
       * var grd = ctx.createLinearGradient(x0, y0, x1, y1);
       * x0: 渐变开始点的 x 坐标
       * y0: 渐变开始点的 y 坐标
       * x1: 渐变结束点的 x 坐标
       * y1: 渐变结束点的 y 坐标
       * 关键点： 把渐变设置到填充的样式
       * grd.addColorStop(stop, color): 规定渐变对象中的颜色和停止位置
       * stop: 0.0 - 1.0 之间的浮点数，表示渐变中某个颜色停止的位置
       * color: 颜色值
      */
      const myCanvas = document.getElementById("myCanvas");
      const ctx = myCanvas.getContext("2d");

      // ctx.beginPath();
      // ctx.moveTo(0, 0);
      // ctx.lineTo(200, 0);
      // ctx.lineTo(200, 200);
      // ctx.closePath();
      ctx.rect(20, 20, 150, 100);
      let grd = ctx.createLinearGradient(20, 20, 170, 120);
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.shadowColor = "blue";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowBlur = 10;
      ctx.fill();
    </script>
  </body>
</html>